<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		#engine
		{
			border:solid 1px;
			width:1300px;
			height:60px;
		}
		.search
		{
			width:265px;
			height:25px;
			position:absolute;
			left:1150px;
			top:35px;
		}
		.button1
		{
			position:absolute;
			left:1418px;
			top:35px;
			height:31px;
			width: 60px;
		}
		#littletitle
		{
			position: absolute;
			top: 45px;
			left: 400px;
		}
		.into
		{
          background-color:orange;
          height:25px;
          position: absolute;
		  top: 42px;
		  left: 570px;
		}
		#店名
		{
			border:solid 1px;
			width:1300px;
			height:130px;
		}
		#nav
		{
			border:solid 1px;
			width:1300px;
			height:35px;
			background-color: black;
			margin: auto;
		}
		#nav1
		{
			color: white;
			position: absolute;
			left:480px;
			top:192px;
		}
		#nav2
		{
			color: white;
			position: absolute;
			left:710px;
			top:192px;
		}
		#nav3
		{
			color: white;
			position: absolute;
			left:910px;
			top:192px;
		}
		#nav4
		{
			color: white;
			position: absolute;
			left:1120px;
			top:192px;
		}
		#nav5
		{
			color: white;
			position: absolute;
			left:1320px;
			top:192px;
		}
		.main
		{
			width:1300px;
		}
		#hottype
		{
            width:1300px;
            margin: auto;
		}
		.one
		{
			width:430px;
		}
		.two
		{
			width:430px;
		}
		.three
		{
			width:430px;
		}
		.four
		{
			width: 1300px;
			height: 690px;
		}
		* {
                margin: 0px;
                padding: 0px;
            }

            #lunbotu {
                width: 1226px;
                height: 600px;
                overflow: hidden;
                position: relative;
                margin: 0px auto;
                position: relative;
            }

            #banner {
                height: 460px;
                width: 6130px;
                position: absolute;
                transition: 2s;
                left: 0px;
            }

            #banner img {
                float: left;
            }

            #biao {
                position: absolute;
                top: 550px;
                left: 50%;
            }

            #biao_1 {
                height: 20px;
                width: 20px;
                border: 1px solid #000;
                z-index: 10;
                float: left;
                list-style: none;
                border-radius: 50%;
                margin-left: 20px;
                text-align: center;
                cursor:pointer;
            }

	</style>
</head>
<body>
	<div id="container">
	<center>
	<div id="engine">
		<span id="littletitle">店铺：爱洛奇饰品</span>
		<input type="button" class="into" value="进入店铺"></button>
	<form>
		<input type="text" class="search">
		<input type="button" value="搜索" class="button1">
	</form>
	</div>
    </center>
    <center>
    <div id="店名">
    	<h1>爱洛奇饰品</h1>
    	精美饰品任您挑选——点缀您的美
    </div>
    </center>
    <div id="nav">
    	<p id="nav1">首页 </p>
    	<p id="nav2">所有分类</p>
    	<p id="nav3">耳饰</p>
    	<p id="nav4">项链</p>
    	<p id="nav5">手链</p>
    	<p id="nav6">戒指</p>
    </div>
    <center><img class="main" src="主图.jpg"></center>
    <div id="hottype">
    	<center><h2>category</h2></center>
    	<center><p>#热门品类#</p></center>
    	<img class="one" src="1.jpg">
    	<img class="two" src="2.jpg">
    	<img class="three" src="3.jpg">
     </div>
     <center>
     <div id="lunbotu">
     <h3>-热销推荐-</h3>
     <div id="banner">
        <img class="m" src="4.jpg" />
        <img class="m" src="5.jpg" />
        <img class="m" src="6.jpg" />
    </div>
    <div id="biao">
        <ul>
            <li id="biao_1">1</li>
            <li id="biao_1">2</li>
            <li id="biao_1">3</li>
        </ul>
    </div>
    </div>
    <script type="text/javascript">
        var slid = document.getElementById("banner");
        var imgwidth = document.getElementsByClassName("m");
        var oli=document.getElementsByTagName("li");
        var i =0;
        auto();
        oli[0].style.cssText="background:#ff6700;color:#fff;";
        function auto()
        {
            time = setInterval(function(){
                i++;
            if(i <= 4) 
            {
                slid.style.left = slid.offsetLeft - 1226 + "px";
                oli[i].style.cssText="background:#ff6700;color:#fff;";
                oli[i-1].style.cssText="background:none;color:#000;";
            } else {
                slid.style.left ="0px";
                oli[4].style.cssText="background:none;color:#000;";
                oli[0].style.cssText="background:#ff6700;color:#fff;";
                i=0;
            }
            console.log(i);

        }, 3000)

        }

            for(var j=0;j<=4;j++)
            {
            imgwidth[j].index=j;
            oli[j].index=j;
            oli[j].onmouseover=function(){
                this.style.cssText="background:#ff6700;color:#fff;"    
                this.onmouseout=function(){
                    this.style.cssText="background:none;color:#000;"
                }
            }

            oli[j].onclick=function(){
                clearInterval(time);
                m=this.index;
                slid.style.left=-m*1226+"px";    
                i=m;
                auto();
                console.log(i);
            }
            }    
    </script>
    </div>
</body>
</html>